<template>
  <div >
    <header style=" position: fixed; z-index: 1000;  width: 100%; " >
      <div @click="scrollTop" v-show="!isMobile" href="#" class="cd-top " aria-label="scroll to the top of the page" ></div>
      <transition name="fade">
      <div class="top-nav" v-if="!isMobile" >
        <ul class="menu-list">
          <li  style=" font-weight:normal; font-size: 20px; color: #666666; padding-left: 30px; margin-right: auto; ">星野の小破站
          </li>
          <li v-for="(item, index) in menuItems" :key="index">
            <span style="cursor: pointer;" @click="$router.push(item.title.url)"><i :class="item.title.icon"></i> {{ item.title.name }}</span>
          </li>
          <img v-if="!person" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            style="width: 50px; border-radius: 50%; cursor: pointer; margin-right: 10px;" alt="" @click="loginBlog">
          <el-dropdown v-else placement="bottom" style=" cursor: pointer;">
            <div style="display: flex; align-items: center;">
              <img :src="person.image||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
                style="width: 50px; border-radius: 50%;">
              <span style="font-size:14px; margin-left: 5px; font-weight: bold; color: #666666; margin-right: 5px; ">{{ person.name }}</span>
            </div>
            <el-dropdown-menu>
              <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </ul>
      </div>
    </transition>
      <div v-if="isMobile" style="display: flex; align-items: center;  width: 100%; overflow-x: hidden;">
      <button  class="menu-button" @click="toggleDrawer">☰</button>
      <div style="margin-left: auto; padding-right: 10px;">
      <img v-if="!person" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            style="width: 40px; border-radius: 50%; margin-top: 10px; cursor: pointer;" alt="" @click="loginBlog">
          <el-dropdown v-else placement="bottom" style=" cursor: pointer;">
            <div style="display: flex; align-items: center; margin-top: 10px;">
              <img :src="person.image||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
                style="width: 40px; border-radius: 50%;">
              <span style="font-size:14px; margin-left: 5px; font-weight: bold; color: #666;"> {{ person.name }}</span>
            </div>
            <el-dropdown-menu>
              <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
    </div>
    </header>



    <div class="drawer" :class="{ open: isDrawerOpen }">
      <div class="drawer-header">
        <span class="logo">导航菜单</span>
        <button class="close-button" @click="toggleDrawer">×</button>
      </div>
      <div class="avatar">
        <img :src=superUser.image alt=" " width="90" height="90" style="border-radius: 50%;">
      </div>
      <p style="text-align: center; font-family:Ubuntu-Bt; font-weight:lighter !important;">{{ superUser.introduction }}</p>
      <div class="socials">
        <a class="social-item" href="" target="_blank" aria-label="access the webmaster's social media accounts">
          
            <img src="	https://lixingyong.com/themes/theme-sakura/assets/images/sns/github.png" width="18" height="18" alt="sns">
          
        </a><a class="social-item" href="https://music.163.com/#/user/home?id=1437990779" target="_blank" aria-label="access the webmaster's social media accounts">
          
            <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/wangyiyun.png" width="18" height="18" alt="sns">
          
          
        </a><a class="social-item" href="https://space.bilibili.com/287035223" target="_blank" aria-label="access the webmaster's social media accounts">
            <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/bilibili.png" width="18" height="18" alt="sns">
        </a>
      </div>
      <ul class="list">
        <li v-for="(item, index) in menuItems" :key="index">
          <span style="cursor: pointer;" @click="push(item)"><i :class="item.title.icon"></i> {{ item.title.name }}</span>
        </li>
      </ul>
    </div>

    <div v-if="isMobile && isDrawerOpen" class="overlay" @click="closeDrawer"></div>
    <router-view @update:user="updateUser" />
    <el-dialog title="提示" :visible.sync="dialogVisible" :width=width  :before-close="handleClose">
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 25px;">
        <el-form :model="form" style="width: 80%;" :rules="rules" ref="loginRef">
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px;">欢迎登陆个人博客</div>
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码"
              v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="login">登陆</el-button>
          </el-form-item>
          <div style="display: flex;">
            <div style="flex:1; ">没有账号？请<span style="color: aqua; cursor: pointer;"
                @click="dialogVisible2=true;dialogVisible=false">注册</span></div>
            <div style="flex:1; text-align: right;"><span style="color:blue; cursor: pointer;">忘记密码</span></div>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible2" :width=width  :before-close="handleClose2">
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 25px;">
    <el-form :model="user" style="width: 80%;" :rules="rules2" ref="registerRef">
            <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 10px;">欢迎注册个人博客</div>
            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPass">
              <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码" v-model="user.confirmPass"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="register" >注 册</el-button>
            </el-form-item>
            <div style="display: flex;">
              <div style="flex:1; ">已有账号？请<span style="color: aqua; cursor: pointer;" @click="dialogVisible2=false;dialogVisible=true">登陆</span></div>
              
            </div>
              
          </el-form>
        </div>
    </el-dialog>
    <div class="site-footer" style="overflow-x: hidden;">
      <div class="site-info">
        <div class="footer-logo">
          <p style="background-image: url(https://lixingyong.com/themes/theme-sakura/assets/images/footer/sakura.svg);"></p>
        </div>
        <p style="margin-bottom: 1.5em;">@星野のblog</p>
        <div class="footer-device">备案号:123456</div>
      </div>
    </div>
  </div>
</template>
 
<script >

export default {
  data() {
    const validatePassword=(rule,confirmPass,callback)=>{
      if(confirmPass===''){
        callback(new Error('请确认密码'))
      }else if(confirmPass!=this.user.password){
        callback(new Error('两次输入密码不一致'))
      }else
        callback()
    }
    return {
      user:{
        username:'',
        password:'',
        confirmPass:''
       },
       superUser:{},
       rules2:{
        username:[
          {required:true,message:'请输入账号',trigger:'blur'} ,
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'} ,
        ],
        confirmPass:[
          {validator:validatePassword,trigger:'blur'} ,
        ]
       },
      dialogVisible2:false,
      isDrawerOpen: false,
      isMobile: false,
      width:'30%',
      hover:false,
      menuItems: [
        { title:{name: "首页",url:'/home',icon:'el-icon-zhuye' }},
        { title:{name: "文章",url:'/novels',icon:'el-icon-wenzhangbianji' }},
        { title:{name: "说说",url:'/shuoshuo',icon:'el-icon-41shuoshuo' }},
        { title:{name: "相册",url:'/image',icon:'el-icon-xiangce1' }},
        { title:{name: "留言",url:'/message',icon:'el-icon-liuyan1' }},

     /*    { title: "文章" },
        { title: "🎁 说说" },
        { title: "🧰 相册" },
        { title: "💬 留言" },
        { title: "🍺 关于小站" }, */
      ],
      showIcon: true,
      form: {
        username: '',
        password: '',
      },
      top:true,
      image: '',
      person:JSON.parse(localStorage.getItem('user' || '{}')),
      dialogVisible: false,
      novels: [],
      lastScrollPosition: 0, // 上一次滚动的位置
      isScrolledDown: false,

     rules:{
        username:[
          {required:true,message:'请输入账号',trigger:'blur'} ,
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'} ,
        ]
       }
    };
  },
  methods: {
    scrollTop(){
      window.scrollTo({
        top: 0, 
        behavior: 'smooth' 
        
      });

    },
    register() {
      this.$refs['registerRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/user/register', this.user).then(res => {
            if(res.code=='1'){
              this.dialogVisible2=false;
              this.dialogVisible=true;
              this.$message.success('注册成功')
            }else{
              this.$message.error(res.msg)
            }
          })

        }

      })

    },
    handleLogin(){
      this.dialogVisible=true
    },
    login() {
      this.$refs['loginRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/login', this.form).then(res => {
            if(res.code=='1'){
              localStorage.setItem('user',JSON.stringify(res.data))
              this.person=JSON.parse(localStorage.getItem('user' || '{}'))
                this.$message.success('登陆成功')
                this.dialogVisible=false
              }
            else{
              this.$message.error(res.msg)
            }
          })

        }

      })

    },
    handleClose(){
      this.form={}
      this.dialogVisible=false
    },
    handleClose2(){
      this.form={}
      this.dialogVisible2=false
    },
    loginBlog(){
      this.user={}
      this.dialogVisible=true
    },
    exit(){
      localStorage.removeItem('user'),
      this.person=''
      this.$message.success("退出成功")
    },
    errorHandler() {
      return true
  },
    toggleDrawer() {
      this.isDrawerOpen = !this.isDrawerOpen;
    },
    closeDrawer() {
      this.isDrawerOpen = false;
    },
    push(item){
      this.$router.push(item.title.url)
      this.isDrawerOpen=false;
    },
    checkScreenSize() {
      this.isMobile = window.innerWidth <= 768;
      if(window.innerWidth <= 768){
        this.width='70%'
      }else{
        this.width='30%'
      }
    },
    updateUser(user){
        console.log(JSON.parse(JSON.stringify(user)))
        this.person=JSON.parse(JSON.stringify(user))
      } ,
    handleScroll() {
      var targetElement = document.querySelector('.top-nav')
      const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
      if (currentScrollPosition != 0) {
        document.querySelector('.cd-top').classList.add('cd-is-visible')
        document.querySelectorAll('.top-nav .menu-list li span').forEach(function(element){
          element.style.display='block'
        })
        if(targetElement){
           targetElement.style.boxShadow ='0 1px 40px 0px #00000080';
        targetElement.style.background='#fff'
        }
       
      } else {
        document.querySelector('.cd-top').classList.remove('cd-is-visible')
        document.querySelectorAll('.top-nav .menu-list li span').forEach(function(element){
          element.style.display='none'
        })
        if(targetElement){
           targetElement.style.boxShadow ='';
        targetElement.style.background=''
        }
       
      
    }
    },
  },
  mounted() {
    this.$request.get('/user/super').then(res => {
      this.superUser = res.data
    }),
    this.checkScreenSize();
    window.addEventListener("resize", this.checkScreenSize);
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.checkScreenSize);
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>
 
<style scoped>
.avatar{
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
/* 通用样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
 
/* 顶部导航栏样式（桌面端） */
.top-nav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-height: min-content;
  transition: all 1s ease; 
  padding: 5px;
  z-index: 2000;
}

.cd-is-visible{
  opacity: 1 !important;
  top: -200px !important;
  cursor: var();
}

.top-nav:hover{
  background: #fff;
  box-shadow: 0 1px 40px -8px #00000080;
}



.top-nav:hover >.menu-list li span{
  display: block !important;
}
 
.top-nav .menu-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cd-top {
    display: block;
    z-index: 9;
    position: fixed;
    top: -900px ;
    right: 1.5rem;
    width: 4.5rem;
    height: 900px;
    background-size: contain;
    transition: all .5s ease-in-out;
    opacity: 1;
    background: url('@/assets/img/scroll.png');
    cursor: url('@/assets/img/1.cur'),auto;
}

.list{
  padding-left: 10px;
  margin-left: 0%;
  font-size: medium;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
} 
.list li{
  margin: 10px 0;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
  position: relative ;
}


.top-nav .menu-list li {
  
  margin: 0 10px;
  
  
}
.top-nav .menu-list li span{
  display: none;
  font-size: large;
  color: #666666 ;
  animation: fadeInRight .8s ease;
}

.top-nav .menu-list li span::after {
  content: "";
    display: block;
    position: absolute;
    bottom: -0.8rem;
    height: 6px;
    background-color: orange;
    /* background-color: var(--theme-color); */
    width: 0px;
    transition: width .25s ease-in-out;
}
.top-nav .menu-list li span:hover::after{
  width:65px;
}
.top-nav .menu-list li span:hover{
  color: orange;
}


 
/* 移动端抽屉菜单样式 */
.menu-button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: orange
}
 
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background-color: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
 
.drawer.open {
  transform: translateX(0);
}
 
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}
 
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.menu-list li {
  padding: 3px;
  position: relative;
}
 
.menu-list li a {
  text-decoration: none;
  color: #333;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
} 

/* 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.width{
  width: 75% !important;
}
.site-footer{
  background-color: aliceblue;
    width: 100%;
   /*  margin: auto; */
    position: relative;
    overflow: hidden;
}
.site-info{
  /* margin: 2rem auto; */
  padding: 5rem 0 2rem 0;
    text-align: center;
    font-size: .8125rem;
    background-color: aliceblue;
    color:#b0b0b0;
    overflow: hidden;
}
.footer-device{
  display: flex;
    justify-content: center;
    align-items: center;
}
.footer-logo p{
  width: 2rem;
    height: 2rem;
    opacity: .8;
    margin: 0 auto;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: poi-deg 12s infinite linear;
}
@keyframes poi-deg {
  0% {
    transform: rotate(0);
}
100% {
    transform: rotate(360deg);
}
}
/* 响应式样式 */
@media (max-width: 768px) {
  .top-nav {
    display: none; /* 隐藏桌面端导航 */
  }
}

@keyframes fadeInRight{
  0% {
      opacity: 0;
      transform: translate(40px);
    }
  
    100% {
      opacity: 1;
      transform: translate(0);
    }
}
.socials {
    display: flex;
    justify-content: center;
    gap: 0 20px;
    margin-bottom: 1em;
    width: 100%;
}
</style>